<template>
  <div class="host-page" v-if="videos">
    <!-- 轮播图 -->
    <van-swipe indicator-color="#fb7299" autoplay="3000">
      <van-swipe-item v-for="(item, index) in model" :key="index">
        <img v-lazy="item.banner" style="width: 100%;height:100px;" />
      </van-swipe-item>
    </van-swipe>
    <video-card-box :videos="videos"></video-card-box>
    <p class="home-bottom">去bilibli App看更多</p>
  </div>
</template>

<script>
import VideoCardBox from './VideoCardBox.vue'
export default {
  props: ['NavName'],
  components: {
    VideoCardBox
  },
  data () {
    return {
      model: [],
      videos: []
    }
  },
  methods: {
    async fetchAd () {
      const res = await this.$http.get('/ad')
      this.model = res.data
    },
    async fetchVideo () {
      const res = await this.$http.get('/video')
      console.log(res)
      this.videos = res.data
    }
  },
  created () {
    this.fetchAd()
    this.fetchVideo()
  }
}
</script>

<style lang="scss">
.host-page {
  background: #fff;
  box-sizing: border-box;
  padding: 10px;
  .van-swipe__indicators {
    left: 280px !important;
  }
  .home-bottom {
    margin: 20px 0 10px 0;
    width: 100%;
    text-align: center;
    font-size: 13.4px;
    color: #999;
  }
}
</style>
